<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>确认发布招工信息</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background-color: #f7f7f7;
            color: #333;
            max-width: 750px;
            margin: 0 auto;
        }
        .step-indicator {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background-color: #fff;
            border-bottom: 1px solid #eee;
        }
        .step-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            flex: 1;
        }
        .step-item:not(:last-child):after {
            content: '';
            position: absolute;
            top: 12px;
            left: 50%;
            width: 100%;
            height: 1px;
            background-color: #ddd;
            z-index: 1;
        }
        .step-number {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: #ddd;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            position: relative;
            z-index: 2;
        }
        .step-text {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }
        .step-item.active .step-number {
            background-color: #ff5a5f;
        }
        .step-item.active .step-text {
            color: #ff5a5f;
        }
        .step-item.completed .step-number {
            background-color: #ff5a5f;
        }
        .step-item.completed .step-text {
            color: #ff5a5f;
        }
        .info-card {
            background-color: #fff;
            border-radius: 8px;
            padding: 15px;
            margin: 10px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .info-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
        }
        .info-row {
            display: flex;
            margin-bottom: 10px;
            font-size: 14px;
        }
        .info-label {
            color: #999;
            width: 80px;
        }
        .info-value {
            color: #333;
            flex: 1;
        }
        .points-card {
            background-color: #fff8e6;
            border-left: 3px solid #ffc107;
            padding: 12px 15px;
            margin: 10px;
            border-radius: 8px;
        }
        .points-title {
            font-size: 14px;
            color: #ff9800;
            margin-bottom: 5px;
        }
        .points-value {
            font-size: 16px;
            font-weight: bold;
            color: #ff5a5f;
        }
        .checkbox-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .checkbox-input {
            margin-right: 10px;
        }
        .checkbox-label {
            font-size: 14px;
        }
        .protocol-link {
            color: #1890ff;
            text-decoration: none;
        }
        .action-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            max-width: 750px;
            margin: 0 auto;
            background-color: #fff;
            padding: 10px;
            display: flex;
            justify-content: space-between;
            border-top: 1px solid #eee;
        }
        .btn {
            padding: 12px 0;
            border-radius: 4px;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
        }
        .btn-prev {
            width: 48%;
            background-color: #f5f5f5;
            color: #666;
        }
        .btn-submit {
            width: 48%;
            background-color: #ff5a5f;
            color: #fff;
        }
        .notice-text {
            font-size: 12px;
            color: #999;
            text-align: center;
            margin-top: 5px;
        }
        .select-wrapper {
            position: relative;
            display: inline-block;
            margin-left: 10px;
        }
        .select-wrapper:after {
            content: "▼";
            font-size: 10px;
            color: #666;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
        }
        select {
            appearance: none;
            -webkit-appearance: none;
            padding: 4px 25px 4px 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #fff;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <!-- 步骤指示器 -->
    <div class="step-indicator">
        <div class="step-item completed">
            <div class="step-number">1</div>
            <div class="step-text">填写信息</div>
        </div>
        <div class="step-item completed">
            <div class="step-number">2</div>
            <div class="step-text">上传资料</div>
        </div>
        <div class="step-item active">
            <div class="step-number">3</div>
            <div class="step-text">确认发布</div>
        </div>
    </div>

    <!-- 信息预览区 -->
    <div class="info-card">
        <div class="info-title">高级家政保洁员招聘</div>
        <div class="info-row">
            <div class="info-label">服务类型</div>
            <div class="info-value">日常保洁</div>
        </div>
        <div class="info-row">
            <div class="info-label">工作性质</div>
            <div class="info-value">全职</div>
        </div>
        <div class="info-row">
            <div class="info-label">薪资范围</div>
            <div class="info-value">5000-8000元/月</div>
        </div>
        <div class="info-row">
            <div class="info-label">工作地点</div>
            <div class="info-value">北京市朝阳区国贸CBD</div>
        </div>
        <div class="info-row">
            <div class="info-label">工作时间</div>
            <div class="info-value">周一至周五 9:00-18:00</div>
        </div>
        <div class="info-row">
            <div class="info-label">资料上传</div>
            <div class="info-value">照片3张，无视频</div>
        </div>
        <div class="info-row">
            <div class="info-label">发布有效期</div>
            <div class="info-value">
                30天
                <div class="select-wrapper">
                    <select>
                        <option value="7">7天</option>
                        <option value="15">15天</option>
                        <option value="30" selected>30天</option>
                        <option value="60">60天</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <!-- 积分扣除区 -->
    <div class="points-card">
        <div class="points-title">发布招工信息需扣除：<span class="points-value">50积分</span></div>
        <div class="info-row">
            <div class="info-label">您的积分</div>
            <div class="info-value">120分</div>
        </div>
    </div>

    <!-- 条款同意区 -->
    <div class="info-card">
        <div class="checkbox-item">
            <input type="checkbox" id="protocol" class="checkbox-input" checked>
            <label for="protocol" class="checkbox-label">我已阅读并同意<a href="#" class="protocol-link">《招工信息发布协议》</a></label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" id="truth" class="checkbox-input" checked>
            <label for="truth" class="checkbox-label">我保证所发布信息真实有效</label>
        </div>
    </div>

    <!-- 底部操作栏 -->
    <div class="action-bar">
        <button class="btn btn-prev">上一步</button>
        <button class="btn btn-submit">确认发布</button>
    </div>
    <div class="notice-text">发布后将在24小时内完成审核</div>

    <script>
        // 上一步按钮点击事件
        document.querySelector('.btn-prev').addEventListener('click', function() {
            window.location.href = 'job-publish-step2.html';
        });

        // 确认发布按钮点击事件
        document.querySelector('.btn-submit').addEventListener('click', function() {
            // 检查是否勾选了协议
            const protocolChecked = document.getElementById('protocol').checked;
            const truthChecked = document.getElementById('truth').checked;
            
            if (!protocolChecked || !truthChecked) {
                alert('请先阅读并同意发布协议，并确认信息真实有效');
                return;
            }
            
            // 提交发布信息
            window.location.href = 'job-publish-status.html';
        });


        // 有效期选择变化事件
        document.querySelector('select').addEventListener('change', function() {
            console.log('选择的有效期:', this.value + '天');
        });
    </script>
</body>
</html>